<template>
  <div>
    <div :id="id" :style="{width: width_lenght, height: height_length}" />

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="40%"
      :class="'MapShowfactoyListClass'"
      :before-close="handleClose"
    >
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item v-for="(item,index) in factoryList" :key="index" :title="item.name" :name="index">
          <div class="grey">地址：{{ item.area }}{{ item.address }}</div>
          <!-- <div class="grey">联系人：{{ item.linkman }}</div>
          <div class="grey">联系人手机：{{ item.mobile }}</div> -->
          <!-- <div class="grey">创建时间：{{ item.createTime }}</div> -->
        </el-collapse-item>
      </el-collapse>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false;activeName=null">确 定</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts/lib/echarts'

// 引入中国地图依赖
import 'echarts/map/js/china'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
// import 'lola-admin-support-el/lib/province.json'
// var provinces = require('./province.json')
export default {
  name: 'MapComponents',
  props: {
    id: {
      type: String,
      default: 'myChart'
    },
    widths: {
      type: String,
      default: '100%'
    },
    heights: {
      type: String,
      default: '400px'
    }
    // seriesData: {
    //   type: Array,
    //   default: () => {
    //     return []
    //   }
    // }
  },
  data() {
    return {
      optionMap: {
        tooltip: {},
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['']
        },
        title: {
          text: '纸厂数量分布',
          left: 'center'
        },
        visualMap: {
          show: true,
          type: 'piecewise',
          x: 'left',
          y: 'bottom',
          textStyle: {
            color: 'grey'
          },
          splitNumber: 6,
          pieces: [
            { min: 500, label: '500以上', color: '#5475f5' },
            { min: 100, max: 500, label: '100~500', color: '#9feaa5' },
            { min: 50, max: 100, label: '50~100', color: '#85daef' },
            { min: 20, max: 50, label: '20~50', color: '#74e2ca' },
            { min: 5, max: 20, label: '5~20', color: '#e6ac53' },
            { min: 1, max: 5, label: '1~5', color: '#9fb5ea' },
            { min: 0, max: 0, label: '0', color: '#ccc' }
          ],
          formatter: function(value) { // 标签的格式化工具。
            return 'aaaa' + value
          }
        },
        series: [
          {
            name: '纸厂数量',
            type: 'map',
            mapType: 'china',
            zoom: 1.2,
            itemStyle: {
              normal: {
                borderColor: 'rgba(0, 0, 0, 0.2)'
              },
              emphasis: {
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(999, 0, 0, 0.5)'
              }
            },
            showLegendSymbol: true,
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: true
              }
            },
            data: [
              { name: '北京', value: 0 },
              { name: '天津', value: 0 },
              { name: '上海', value: 0 },
              { name: '重庆', value: 0 },
              { name: '河北', value: 0 },
              { name: '河南', value: 0 },
              { name: '云南', value: 0 },
              { name: '辽宁', value: 0 },
              { name: '黑龙江', value: 0 },
              { name: '湖南', value: 0 },
              { name: '安徽', value: 0 },
              { name: '山东', value: 0 },
              { name: '新疆', value: 0 },
              { name: '江苏', value: 0 },
              { name: '浙江', value: 0 },
              { name: '江西', value: 0 },
              { name: '湖北', value: 0 },
              { name: '广西', value: 0 },
              { name: '甘肃', value: 0 },
              { name: '山西', value: 0 },
              { name: '内蒙古', value: 0 },
              { name: '陕西', value: 0 },
              { name: '吉林', value: 0 },
              { name: '福建', value: 0 },
              { name: '贵州', value: 0 },
              { name: '广东', value: 0 },
              { name: '青海', value: 0 },
              { name: '西藏', value: 0 },
              { name: '四川', value: 0 },
              { name: '宁夏', value: 0 },
              { name: '海南', value: 0 },
              { name: '台湾', value: 0 },
              { name: '香港', value: 0 },
              { name: '澳门', value: 0 }
            ]
          }
        ]
      },
      myChart: null,
      dialogVisible: false,
      factoryList: [],
      activeName: null,
      dialogTitle: '纸厂列表'
    }
  },
  computed: {
    width_lenght: function() {
      return this.widths
    },
    height_length: function() {
      return this.heights
    }
  },
  watch: {
    // legendData: function(val) {
    //   this.init()
    // },
    // xAxisData: function(val) {
    //   this.init()
    // },
    // seriesData: function(val) {
    //   this.init()
    // }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
      // console.log(provinces)
    })
  },
  methods: {
    init() {
      var that = this
      const url = that.$http.conf.api.get('wms').url + '/api/service/index/findMap'
      const data = that.optionMap.series[0].data
      that.$http.post(url, data).then(function(rsp) {
        if (rsp.code !== 200) {
          that.$message.error(rsp.message)
          return
        }
        that.optionMap.series[0].data = rsp.data
        // 基于准备好的dom，初始化echarts实例
        that.myChart = echarts.init(document.getElementById(that.id))
        var optionMap = that.optionMap
        // 绘制图表
        that.myChart.setOption(optionMap)
        that.chinaConfigure()
      }).catch(function(err) {
        console.log(err)
      })
    },
    chinaConfigure() {
      var _this = this
      window.onresize = _this.myChart.resize
      this.myChart.on('click', function(params) {
        const loading = _this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.6)'
        })
        console.log(params)
        const url = _this.$http.conf.api.get('wms').url + '/api/service/index//findMapInfo/' + params.name
        _this.$http.post(url, {}).then(function(rsp) {
          if (rsp.code !== 200) {
            _this.$message.error(rsp.message)
            return
          }
          loading.close()
          if (rsp.data.length > 0) {
            _this.dialogVisible = true
            _this.factoryList = rsp.data
            _this.dialogTitle = params.name + '-纸厂列表'
          } else {
            _this.$message({
              message: '当前地区未有相关纸厂信息',
              type: 'warning'
            })
          }
        }).catch(function(err) {
          console.log(err)
        })
      })
    },
    handleClose(done) {
      done()
      // this.$confirm('确认关闭？')
      //   .then(_ => {
      //     this.activeName = null
      //     done()
      //   })
      //   .catch(_ => {})
    }

  }
}
</script>
<style>
 .MapShowfactoyListClass >.el-dialog{
  height:420px;overflow:scroll;
 }
</style>

